<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符画</title>
</head>
<body>
    <input id="file" type="file" />
    <canvas id="show" ></canvas>
    <video width="300px" controls id="video"></video>
</body>
</html>
<script src="./Img2ASCII.js"></script>
<script>


    const fileDom = document.getElementById('file');
    const videoDom = document.getElementById('video');

    let img2ASCII = new Img2ASCII('show');

    fileDom.addEventListener('change', function(e){

        let file = e.target.files[0]  // 获取选择的视频的文件对象
        videoDom.src = URL.createObjectURL(file)  // 使用 URL.createObjectURL() 创建文件对象的路径并设置给video
    })

    videoDom.addEventListener('canplay', function() {

        videoDom.addEventListener('play', function(){

            img2ASCII.start(videoDom, videoDom.videoWidth, videoDom.videoHeight)
        })
    })

    videoDom.addEventListener('pause', function () {
        img2ASCII.stop()
    })
    

</script>